<template>
	<view class='settlement'>
		<view class='address'>
			<view class='title'>{{$t('settlement.address')}}</view>
			<view class='content dFlex jBetween_aCenter' @click='chooseAddress'>
				<view class='content_info dFlex jStart_aCenter' v-if="address&&address.address_id">
					<u-icon name="map" size='20'></u-icon>
					<view class='addInfo'>
						<view>{{address.last_name + address.first_name}} {{address.mobile}}</view>
						<view style="margin-top: 10rpx;">{{address.area}}</view>
					</view>
				</view>
				<view class='content_info dFlex jStart_aCenter' v-else>
					<u-icon name="map" size='20'></u-icon>
					<view class='addInfo'>{{$t('settlement.addAddress')}}</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- <view class="tips dFlex jStart_aCenter">
				<u-switch v-model="leaveDor" style="transform: scale(0.8);"></u-switch>
				<text>{{$t('settlement.door')}}</text>
			</view> -->
		</view>
		
		<view class='list'>
			<view class="shopOne dFlex jStart_aStart" v-for="(item,index) in goodsLists" :key='index'>
				<view class='shopImg imgPublic'>
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class='shopInfo'>
					<view class='shopName'>{{item.goods_name}}</view>
					<view class='shopName' style="color: #666;">{{item.spec_key_name}}</view>
					<view class='shopName' style="font-size: 12px;">{{item.unit}}</view>
					<view class='shopPrice dFlex jStart_aCenter'>
						<view class='newPrice'>SAR<text>{{item.goods_price}}</text></view>
						<view class='oldPrice' style="text-decoration: line-through;">{{item.market_price}}</view>
					</view>
					<view>{{$t('car.goods_num') + " ：" + item.goods_num}}</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class='btns'>
			<u-button type="primary" style="color:#000;background-color: #f8e801;border:none;" @click="settlement"
				:text="$t('car.settle') + ' SAR ' + total"></u-button>
		</view>
		<pageBottom></pageBottom>
	</view>
</template>

<script>
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			pageBottom
		},
		data() {
			return {
				aid: '',
				cid: '',
				cart_ids: '',
				leaveDor: false,
				goodsLists: [],
				address: {},
				
				total: 0,
			};
		},
		onLoad(options) {
			this.aid = options.aid ?? ''
			this.cid = options.cid ?? ''
			this.cart_ids = options.cart_ids ?? ''
			this.init()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.settlement'),
			})
		},
		onPullDownRefresh() {
			this.init()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		methods: {
			// 选择地址
			chooseAddress() {
				uni.navigateTo({
					url: './address?cart_ids=' + this.cart_ids + '&cid=' + this.cid
				})
			},
			async init() {
				const result = await this.$api('/cart/confirmorder', {
					ids: this.cart_ids,
					coupon_id: this.cid
				})
				this.goodsLists = result.goodslist
				this.address = result.address
				
				this.total = result.total

				if (this.aid) {
					const address = await this.$api('/User/address_info', {
						address_id: this.aid
					})
					this.address = address
				}
				console.log('address', this.address)
			},
			async settlement() {
				if(!this.address){
					uni.showToast({
						title: this.$t('car.address'),
						icon: "none"
					})
					return
				}
				const result = await this.$api('/cart/addorder', {
					ids: this.cart_ids,
					coupon_id: this.cid,
					address_id: this.address?.address_id
				})
				console.log(result);
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/pay?id='+result.id+'&amount='+this.total
					})
				}, 800)
			}
		}
	}
</script>

<style lang="scss">
	.settlement {
		.btns {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			z-index: 1;
		}

		.list {
			.shopOne {
				.shopInfo {
					.quan {
						.quanIcon {
							width: 10px;
							height: 10px;
							margin-right: 10px;
						}

						background:rgba(56, 174, 4, 0.05);
						width:100%;
						border: 1px dashed #38ae04;
						font-size:12px;
						border-radius: 5px;
						padding:4px 8px;
						color:#38ae04;
						box-sizing: border-box;
					}

					.shopPrice {
						.oldPrice {
							font-size: 12px;
							margin-left: 12px;
							color: #7e859b;
						}

						.newPrice {
							font-weight: bold;

							text {
								font-size: 16px;
								display: inline-block;
								margin-left: 5px;
							}
						}

						width:100%;
						margin:6px 0;
					}

					.shopName {
						width: 100%;
						display: -webkit-box;
						/* 设置为WebKit内核的弹性盒子模型 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						overflow: hidden;
						/* 隐藏超出范围的内容 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}

					width:calc(100% - 112px);
				}

				.shopImg {
					width: 100px;
					margin-right: 12px;
				}

				width:100%;
				padding:12px;
				box-sizing: border-box;
				border-radius: 5px;
				overflow: hidden;
				border-bottom: 5px solid #f7f7fa;
			}

			width:100%;
			background: white;
			border-bottom: 10px solid #f7f7fa;
			margin-top: 12px;
		}

		.address {
			.tips {
				padding: 12px;
			}

			.content {
				.addInfo {
					margin-left: 5px;
				}

				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}

			.title {
				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}

			width: 100%;
			background:white;
			border-radius: 5px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}
</style>